<script setup>
  
   import {ref,onBeforeMount} from 'vue'
   import { 
      Edit,
      Delete,
    } from '@element-plus/icons-vue'
    import {ElMessageBox,ElMessage} from 'element-plus'
     import {
         articleCategoryListService,
         deleteCategoryService,
         addCategoryService,
         updateCategoryService
      } from '@/api/category'
   // 获取分类列表
   const categoryList = ref([])
   const getCategoryList = async ()=>{
      // 添加分页参数:防止参数被修改，做简单检查
      let params = {
         pageNum: currentPage.value ? currentPage.value : 1,
         pageSize: pageSize.value ? pageSize.value : 4, 
      }

      const res = await articleCategoryListService(params)
      categoryList.value = res.data.list
      totalPages.value = res.data.pages
      totalCount.value = res.data.total 
   }
   onBeforeMount(async ()=>{
     getCategoryList()
   })

   //控制弹窗
   const dialogVisible = ref(false)
   //添加分类数据模型
   const categoryModel = ref({
      categoryName: '',
      categoryAlias: ''
   })

   //添加分类表单校验
   const rules = {
      categoryName: [
         { required: true, message: '请输入分类名称', trigger: 'blur' },
      ],
      categoryAlias: [
         { required: true, message: '请输入分类别名', trigger: 'blur' },
      ]
   }

   //定义变量,控制标题的展示
   const title = ref('')
   //展示编辑弹窗
   const showUpdateDialog = (row) => {
      dialogVisible.value = true; 
      title.value = '修改分类'
      //数据拷贝
      categoryModel.value.categoryName = row.categoryName;
      categoryModel.value.categoryAlias = row.categoryAlias;
      //扩展id属性,将来需要传递给后台,完成分类的修改
      categoryModel.value.id = row.id
   }

   const updateCategory = async () => { 
      let result = await updateCategoryService(categoryModel.value);
      ElMessage.success(result.msg ? result.msg : '更新成功')

      //调用获取所有文章分类的函数
      getCategoryList();
      dialogVisible.value = false;
   }


   //展示添加分类弹窗
   const showAddDialog = () => {
      dialogVisible.value = true; 
      title.value = '添加分类'
      //清空数据
      categoryModel.value.categoryName = '';
      categoryModel.value.categoryAlias = '';
   }

   //添加分类
   const addCategory = async () => {
      let result = await addCategoryService(categoryModel.value);
      ElMessage.success(result.msg ? result.msg : '添加成功')

      //调用获取所有文章分类的函数
      getCategoryList();
      dialogVisible.value = false;
   }

   //删除模块
   const deleteCategory = (row) => {
   //提示用户  确认框
   ElMessageBox.confirm(
      '你确认要删除该分类信息吗?',
      '温馨提示',
      {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
      }
   )
      .then(async () => {
         //调用接口
         let result = await deleteCategoryService(row.id);
         ElMessage({
               type: 'success',
               message: '删除成功',
         })
         //刷新列表
         getCategoryList();
      })
      .catch(() => {
         ElMessage({
               type: 'info',
               message: '用户取消了删除',
         })
      })
   }
   
/**
 * 分页功能
 * currentPage:当前页号
 * pageSize:每页显示的记录数
 * totalPages:总页数
 * totalCount:总记录数
 * handleSizeChange:当改变每页显示的记录数时触发
 * handleCurrentChange:当改变页号时触发
 */ 

const currentPage = ref(1)
const pageSize = ref(5)
const totalPages = ref(0)
const totalCount = ref(0)
const handleSizeChange = (val) => {
   pageSize.value = val;
   //刷新数据
   getCategoryList();
}

const handleCurrentChange = (val) => {
   currentPage.value = val;
   //刷新数据
   getCategoryList();
}

</script>
<template>
   <el-card class="page-container" :body-style="{ margin: '0px auto' }">
      <template #header>
         <div class="header">
               <span>文章分类</span>
               <div class="extra">
                  <el-button type="primary" @click="showAddDialog">添加分类</el-button>
               </div>
         </div>
      </template>
      <el-table :data="categoryList" border 
         style="width: 100%" 
         :header-cell-style="{textAlign: 'center'}"
         :cell-style="{ textAlign: 'center' }"
         height="430px"
         table-layout="fixed"
         >
         <el-table-column type="index"  label="序号"  width="60"/>
         <el-table-column prop="categoryName" label="分类名称" />
         <el-table-column prop="categoryAlias" label="分类别名" />
         <el-table-column prop="createTime" label="创建时间" />
         <el-table-column prop="updateTime" label="更新时间"/>
         <el-table-column label="操作" width="150" fixed="right">
            <template v-slot="scope">
               <el-button type="primary" :icon="Edit" circle @click="showUpdateDialog(scope.row)" size="small"/>
               <el-button type="danger" :icon="Delete" circle @click="deleteCategory(scope.row)" size="small"/>
            </template>
         </el-table-column>
      </el-table>
      <el-pagination
         v-model:currentPage="currentPage"
         v-model:page-size="pageSize"
         :page-sizes="[5, 10, 15, 20]"
         layout="total, sizes, prev, pager, next, jumper"
         :hide-on-single-page="true"
         :total="totalCount"
         :page-count="totalPages"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
      />
      <!-- 添加分类弹窗 -->
      <el-dialog v-model="dialogVisible" :title="title" width="30%">
         <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
               <el-form-item label="分类名称" prop="categoryName">
                  <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
               </el-form-item>
               <el-form-item label="分类别名" prop="categoryAlias">
                  <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
               </el-form-item>
         </el-form>
         <template #footer>
               <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="title == '添加分类' ? addCategory() : updateCategory()"> 确认 </el-button>
               </span>
         </template>
      </el-dialog>
   </el-card>
   
</template>
<style lang="scss" scoped>
 
   .page-container {
      min-height: 100%;
      box-sizing: border-box;

      .header {
         display: flex;
         align-items: center;
         justify-content: space-between;
      }
      //分页样式
      .el-pagination{
         margin-top: 10px;
         //左对齐
         justify-content: end;
      }
   }


</style>